<template>
    <div>
  <el-form :model="user" label-width="80px" :rules="yzgz" ref="abc">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="user.username"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="pwd">
      <el-input type="password" v-model="user.pwd"></el-input>
    </el-form-item>

    <el-form-item label="学历">
      <el-select v-model="user.edu" placeholder="请选择活动区域">
<!--      双向绑定 这个传的是value的字母  -->
        <el-option label="本科" value="benke"></el-option>
        <el-option label="大专" value="dazhuan"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click.prevent="test" >登录</el-button>
    </el-form-item>
  </el-form>
    </div>
</template>

<script>
    export default {
      name: "myFrom",
          data(){
            return{
            user:{
           username:"",
              pwd:""
          },
          yzgz:{//表单校验规则
             username:[//username项的校验规则，每一项规则可以有多个要求
               {required:true,message:"用户名不能为空",trigger:"blur"}
                ],
                pwd:[//password项的校验规则
                  {required:true,message:"密码不能为空",trigger:"blur"}
                ]
              }

       }
   },
      methods:{
        test(){
          this.$refs["abc"].validate((valid)=>{
            //valid表示表单是否验证通过。
            if(valid){
              alert("验证通过");
            }else{
              alert("验证失败");
            }
          })
        }
      }

}
</script>

<style scoped>

</style>
